<script setup lang="ts">
// 方式一
// const props = defineProps({
//   title: {
//     type: String,
//     required: false,
//     default: "未指定",
//   },
//   arr: Array<Number>,
// });
// console.log(props.title);

// 方式二
// const props = defineProps<{ title: string; arr: number[] }>();

// [TS语法]：指定默认值
const props = withDefaults(defineProps<{ title: string; arr: number[] }>(), {
  title: "未指定",
  arr: () => [], // 复杂数据类型需要使用回调的形式
});
console.log(props.title);

// 给父组件传值
// const emit = defineEmits(["on-click"]);
const emit = defineEmits<{
  (event: "on-click", name: string): void;
}>();
const sendToParent = () => {
  emit("on-click", "张三");
};

// 暴露数据给父组件
defineExpose({ name: "李四" });
</script>

<template>
  <div style="background: pink; padding: 1rem">
    <h3>子组件</h3>
    <div>
      父组件传递的值：
      <span
        style="
          color: brown;
          background: cornsilk;
          padding: 0.25rem;
          margin-right: 0.25rem;
        "
        >{{ title }}</span
      >
      <span
        style="
          color: brown;
          background: cornsilk;
          padding: 0.25rem;
          margin-right: 0.25rem;
        "
        >{{ arr }}</span
      >
    </div>
    <div><button @click="sendToParent">给父组件传值</button></div>
  </div>
</template>

<style scoped></style>
